<template>
  <h1>Vant UI 元素</h1>
  <van-switch v-model="check" />
  <van-popup v-model:show="check" position="bottom">
    <van-area title="标题" :area-list="areaList" />
  </van-popup>

  <h1>异步接口请求</h1>
  <van-button type="success" @click="demo">发送接口请求</van-button>
  
  <h1>页面跳转</h1>
  <router-link to="/user/index">路由跳转 - 跳转到会员中心界面</router-link>
  <van-button type="success" @click="redirect">绑定点击时间跳转路由 - 跳转到会员中心界面</van-button>

  <h1>国际化多语言</h1>
  <!-- 在标签中使用 通过 $t() 或者 t() -->
  <van-button type="success" @click="locale = 'zh'">中文</van-button>
  <van-button type="warning" @click="locale = 'en'">英文</van-button>
  <p>{{ t('common.username') }}</p>
</template>

<script setup>
  //引入vantUI框架的地区数据
  import { areaList } from '@vant/area-data';

  // 引入国际化插件
  import { useI18n } from 'vue-i18n';
  const { t, locale } = useI18n()

  console.log(locale.value)

  // 引入pinia
  import {useStore} from '@/store/index'
  import {storeToRefs} from 'pinia'

  //初始化
  const store = useStore()
  var {user} = storeToRefs(store)

  //存放pinia数据
  user.value = {
  	nickname: '张三',
  	sex: '男',
  	age: 20
  }

  console.log(user.value)

  // 引入类似于vue2的this对象
  const {proxy} = getCurrentInstance()

  //设置cookie
  proxy.$cookies.set('LoginUser', '用户信息');

  //获取cookie
  console.log(proxy.$cookies.get('LoginUser'));

  //删除
  proxy.$cookies.remove('LoginUser');

  //调用自定义插件
  console.log(proxy.$demo());

  // 响应式数据
  let check = ref(false)

  //路由跳转方法
  let redirect = () => 
  {
    proxy.$router.push('/user/index')
  }

  // 方法
  let demo = async () =>
  {
    //src/services/demo.js 封装的自定义插件中
    proxy.$toast('接口请求提醒')

    //接口请求
    var result = await proxy.$POST({
      url: '/index/index',
      params:{}
    })

    console.log(result)
  }
</script>
